<template>
  <el-card>
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="query.productTypeName"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            plain
            @click="loadProInfos"
          ></el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="dialog.addShow = true"
            >新建</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="proInfoList"
      border
      style="width: 100%"
      :cell-style="{ 'text-align': 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <el-table-column prop="productId" label="产品编号"> </el-table-column>
      <el-table-column prop="productName" label="产品名称"> </el-table-column>
      <el-table-column prop="productTypeName" label="产品类型">
      </el-table-column>
      <el-table-column prop="productStorageNum" label="产品数量">
      </el-table-column>
      <el-table-column prop="productUnit" label="产品单位"> </el-table-column>
      <el-table-column label="操作" width="300px">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="handleEdit(scope.row.productId)"
            >编辑</el-button
          >
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @confirm="handleDelete(scope.row.productId)"
          >
            <el-button
              type="danger"
              slot="reference"
              size="small"
              icon="el-icon-delete"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="pageInfo.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
    <!-- ----------------------添加产品界面一---------------------- -->
    <!-- 填写产品信息，用户选择新建工序流程或者现有工序流程中选择 -->
    <el-dialog title="添加产品定义" :visible.sync="dialog.addShow" width="40%">
      <el-form ref="addForm" :model="addForm">
        <el-form-item label="产品名称">
          <el-input
            v-model="addForm.productName"
            placeholder="请输入产品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型编号">
          <el-input
            v-model="addForm.productTypeId"
            placeholder="请输入类型编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品单位">
          <el-input
            v-model="addForm.productUnit"
            placeholder="请输入产品单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品价格">
          <el-input
            v-model="addForm.productPrice"
            placeholder="请输入产品价格"
          ></el-input>
        </el-form-item>
        <el-form-item label="工序流程">
          <el-radio-group v-model="selectOrCreate">
            <el-radio :label="0">选择现有流程</el-radio>
            <el-radio :label="1">新建工序流程</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.addShow = false">取 消</el-button>
        <el-button style="margin-top: 12px" @click="nextDialog(2)"
          >下一步</el-button
        >
      </span>
    </el-dialog>
    <!-- ----------------------添加产品界面二------------------------->
    <!---------------------- 选择现有工序流程 --------------------->
    <el-dialog
      title="流程列表"
      :visible.sync="dialog.selectProcedureShow"
      width="50%"
    >
      <el-table :data="processList" height="250" border style="width: 100%">
        <el-table-column prop="operationProcedureContent" label="流程目标">
        </el-table-column>
        <el-table-column label="流程步骤">
          <template slot-scope="scope">
            <el-steps
              :active="stepActive"
              finish-status="success"
              :align-center="true"
            >
              <el-step
                :title="item.proDetailContent"
                v-for="(item, index) in scope.row.operationProcedures"
                :key="index"
              ></el-step>
            </el-steps>
          </template>
        </el-table-column>
        <el-table-column label="选择">
          <template slot-scope="scope">
            <el-radio-group v-model="addForm.chooseStep">
              <el-radio
                :label="scope.row.operationProcedureId"
                border
              ></el-radio>
            </el-radio-group>
          </template>
        </el-table-column>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.selectProcedureShow = false">取 消</el-button>
        <el-button style="margin-top: 12px" @click="nextDialog(3)"
          >下一步</el-button
        >
      </span>
    </el-dialog>
    <!-- ----------------------添加产品界面三------------------------->
    <!------------------------- 新建工序流程 ------------------------->
    <el-dialog
      title="新建流程定义"
      :visible.sync="dialog.createProcedureShow"
      width="50%"
    >
      <el-form ref="addForm" :model="addForm">
        <el-form-item label="工序流程名称">
          <el-input
            v-model="addForm.operationProcedureContent"
            placeholder="请输入流程名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="工序流程">
          <el-steps
            :active="stepIndex"
            finish-status="success"
            :align-center="true"
          >
            <el-step
              :title="item.proDetailContent"
              v-for="(item, index) in addForm.ppdtoList"
              :key="index"
            ></el-step>
          </el-steps>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="currentStepType"
            placeholder="请选择步骤类型"
            style="margin: 20px auto"
          >
            <el-option
              v-for="item in stepTypes"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 当选择领料选项时触发 -->
        <div v-if="currentStepType == 0">
          <el-form-item>
            
          </el-form-item>
          <el-form-item>
            <el-input-number v-model="addForm.matNum" @change="handleChange" :min="1" :max="1000">

            </el-input-number>
          </el-form-item>
        </div>

        <!-- 当选择领料以外的其他选项时触发 -->
        <div v-if="currentStepType != 0">
          <el-form-item>
            <el-input
              v-model="addForm.ppdtoList[stepIndex].proDetailContent"
              placeholder="请输入步骤名称"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="addForm.ppdtoList[stepIndex].content"
              placeholder="请输入步骤内容"
            ></el-input>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button style="margin-top: 12px" @click="prevStep()"
            >上一步骤</el-button
          >
          <el-button style="margin-top: 12px" @click="nextStep()"
            >下一步骤</el-button
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.createProcedureShow = false">取 消</el-button>
        <el-button style="margin-top: 12px" @click="nextDialog(3)"
          >下一步</el-button
        >
      </span>
    </el-dialog>

    <!-- ----------------------添加产品界面四------------------------->
    <!------------------------- 最终展示页面 ------------------------->
    <el-dialog title="产品信息" :visible.sync="dialog.proInfoShow" width="50%">
      <el-form ref="addForm" :model="addForm">
        <el-form-item label="产品名称">
          <el-input
            v-model="addForm.productName"
            placeholder="请输入产品名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型编号">
          <el-input
            v-model="addForm.productTypeId"
            placeholder="请输入类型编号"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品单位">
          <el-input
            v-model="addForm.productUnit"
            placeholder="请输入产品单位"
          ></el-input>
        </el-form-item>
        <el-form-item label="产品价格">
          <el-input
            v-model="addForm.productPrice"
            placeholder="请输入产品价格"
          ></el-input>
        </el-form-item>
        <el-form-item label="工序流程名称">
          <el-input
            v-model="addForm.operationProcedureContent"
            :disabled="selectOrCreate == 0"
          ></el-input>
        </el-form-item>
        <el-form-item label="工序流程">
          <el-steps
            :active="stepIndex"
            finish-status="success"
            :align-center="true"
          >
            <el-step
              :title="item.proDetailContent"
              v-for="(item, index) in addForm.ppdtoList"
              :key="index"
            ></el-step>
          </el-steps>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="addForm.ppdtoList[stepIndex].proDetailContent"
            placeholder="请输入步骤名称"
            :disabled="selectOrCreate == 0"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="addForm.ppdtoList[stepIndex].content"
            placeholder="请输入步骤内容"
            :disabled="selectOrCreate == 0"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-top: 12px" @click="prevStep()"
            >上一步骤</el-button
          >
          <el-button style="margin-top: 12px" @click="nextStep()"
            >下一步骤</el-button
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.proInfoShow = false">取 消</el-button>
        <el-button type="primary" @click="add">创建</el-button>
      </span>
    </el-dialog>

    <!-- --------------------------修改---------------------- -->
    <el-dialog title="编辑产品" :visible.sync="dialog.updateShow" width="30%">
      <el-form ref="updateForm" :model="updateForm" label-width="90px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="产品名称">
              <el-input
                v-model="updateForm.productName"
                placeholder="请输入产品名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="类型编号">
              <el-input
                v-model="updateForm.productTypeId"
                placeholder="请输入类型编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="产品数量">
              <el-input-number
                :min="1"
                v-model="updateForm.productStorageNum"
                placeholder="请输入产品数量"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="产品单位">
              <el-input
                v-model="updateForm.productUnit"
                placeholder="请输入产品单位"
              ></el-input>
            </el-form-item>
            <el-form-item label="编号" hidden>
              <el-input v-model="updateForm.productId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateShow = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      // 当前步骤类型
      currentStepType: 0,
      // 步骤类型
      stepTypes: [
        {
          name: "领料",
          value: 0,
        },
        {
          name: "生产",
          value: 1,
        },
        {
          name: "检验",
          value: 2,
        },
        {
          name: "测试",
          value: 3,
        },
        {
          name: "其他",
          value: 4,
        },
      ],
      // 激活指针
      stepActive: 0,
      // 工序流程列表
      processList: [],
      // 记录步骤
      stepIndex: 0,

      // 用于标记选择流程/新建流程的单选按钮
      selectOrCreate: 0,
      updateForm: {},
      addForm: {
        operationProcedureContent: "",
        ppdtoList: [
          {
            proDetailContent: "步骤1",
            content: "步骤内容",
          },
          {
            proDetailContent: "步骤2",
            content: "步骤内容",
          },
          {
            proDetailContent: "步骤3",
            content: "步骤内容",
          },
        ],
        chooseStep: 0,
      },
      dialog: {
        // 添加产品信息
        addShow: false,
        // 选择工序流程
        selectProcedureShow: false,
        // 新建工序流程
        createProcedureShow: false,
        // 新建产品最终信息页面
        proInfoShow: false,
        // 更新产品信息
        updateShow: false,
      },
      pageInfo: {
        pageSizes: [5, 10, 20, 30],
        total: 0
      },
      query: {
        currentPage: 1,
        pageSize: 5,
        productTypeName: "",
      },
      proInfoList: [],
      options: [],
      optionList: [],
    };
  },
  methods: {
    // 点击下一步后切换到下一个dialog
    nextDialog(state) {
      // 要跳转到第二个界面
      if (2 == state) {
        // 新建工序流程
        if (this.selectOrCreate) {
          this.dialog.createProcedureShow = true;
        }
        // 选择现有工序流程
        else {
          this.loadProcessList();
          this.dialog.selectProcedureShow = true;
        }
      }
      // 要跳转到最后一个界面
      else {
        // 从新建工序流程跳过来的
        if (this.selectOrCreate) {
        }
        // 从选择现有工序流程跳过来的
        else {
          let index = 0;
          for (let i = 0; i < this.processList.length; i++) {
            if (
              this.processList[i].operationProcedureId ==
              this.addForm.chooseStep
            ) {
              index = i;
              break;
            }
          }

          this.addForm.ppdtoList = [];
          this.addForm.operationProcedureContent =
            this.processList[index].operationProcedureContent;
          this.processList[index].operationProcedures.forEach((element) => {
            this.addForm.ppdtoList.push({
              proDetailContent: element.proDetailContent,
              content: "步骤内容",
            });
          });
        }
        this.dialog.proInfoShow = true;
      }
    },
    prevStep() {
      if (this.stepIndex > 0) this.stepIndex--;
    },
    // 点击下一步后将指针移到下一个步骤，如果是最后一个判断是否新增步骤
    nextStep() {
      let maxSize = 7;
      if (
        this.stepIndex == this.addForm.ppdtoList.length - 1 &&
        this.stepIndex < maxSize
      ) {
        this.addForm.ppdtoList.push({
          proDetailContent: "步骤" + (this.stepIndex + 2),
          content: "步骤内容",
        });
        this.stepIndex++;
      } else if (this.stepIndex == maxSize) {
        this.stepIndex = 0;
      } else {
        this.stepIndex++;
      }
      console.log(this.stepIndex);
    },
    handleOptionChange() {
      this.processForm.workNo = this.optionList[this.optionList.length - 1];
    },
    loadOptions() {
      this.$axios.post("/emps/2").then((res) => {
        if (res.data.code == 200) {
          this.options = res.data.data.vos;
        }
      });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.loadProInfos();
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.loadProInfos();
    },
    loadProInfos() {
      this.$axios.post("proinfo/queryAll", this.query).then(res => {
        this.proInfoList = res.data.data.list;
        this.pageInfo.total = res.data.data.total;
      });
    },

    add() {
      this.$axios.post("/proinfo", this.addForm).then((res) => {
        if (res.data.code == 200) {
          this.addForm = {};
          this.$message.success(res.data.message);
          this.dialog.addShow = false;
          this.loadProInfos();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleEdit(productId) {
      this.$axios.get("proinfo/" + productId).then(res => {
        this.updateForm = res.data.data.proInf;
      });
      this.dialog.updateShow = true;
    },
    update() {
      this.$axios.put("proinfo", this.updateForm).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.dialog.updateShow = false;
          this.loadProInfos();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleDelete(productId) {
      this.$axios.delete("proinfo/" + productId).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.loadProInfos();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    loadProcessList() {
      this.$axios.get("/process/select").then((res) => {
        if (res.data.code == 200) {
          this.processList = res.data.data.list;
        }
      });
    },
  },
  mounted() {
    this.loadProInfos();
    this.loadOptions();
  },
};
</script>
